import React, {Dispatch} from 'react';
import {CSSTransition} from "react-transition-group";
import styles from "./test.module.styl";
import {useSelector} from "../../redux/hooks";
import {useDispatch} from "react-redux";
import {addCount, ICountAction, setCount} from "../../redux/actions/count";
import {getLogin} from "../../redux/actions/login";

export const TSTest: React.FC = () => {
  // const [count, setCount] = useState(1);
  const count = useSelector(state => state.sum.count)
  const isLogin = useSelector(state => state.isLogin.login)
  const dispatch = useDispatch<Dispatch<ICountAction>>() // 异步action不太好写，有点恶心,就直接用any就好了
  const dispatchLogin = useDispatch()
  const add = () => {
    dispatch(addCount(1));
  }
  const setZero = () => {
    dispatch(setCount(0));
  }
  const handleClick = () => {
    if (count > 2) {
      setZero();
      console.log("isLogin:", isLogin);
      dispatchLogin(getLogin());
    } else {
      add();
    }
  }
  return (
    <div>
      <CSSTransition in={count % 2 === 0} timeout={500} classNames={{
        enter: styles.slide,
        enterActive: styles.slideActive,
        enterDone: styles.slideDone,
      }}>
        {/*<div onClick={() => setCount(prevState => prevState + 1)} className={styles.box}>aa</div>*/}
        <div onClick={handleClick} className={styles.box}>aa</div>
      </CSSTransition>
    </div>
  );
};
